<template>
    <div>
        <!-- 选择时间币种 -->
        <div :class="[colorWhite == 'white'?'chooseColor1':'chooseColor2']">
            <div @click="timeShow =! timeShow,bShow=false" class="choose-left">
                <div>
                    <span>2018.05</span>
                    <span class="fa fa-sort-desc"></span>
                </div>
                <span>至</span>
                <div>
                    <span>2018.05</span>
                    <span class="fa fa-sort-desc"></span>
                </div>
            </div>
            <div @click="bShow=!bShow,timeShow=false" class="choose-right">
                <span>选择币种</span>
                <span class="fa fa-sort-desc"></span>
            </div>
        </div>
        <!-- 时间区间选择 -->
        <transition name="timeTop">
            <div class="time-picker" v-show="timeShow">
                <p>
                    <span @click="timeShow=false">取消</span>
                    <span @click="timeShow=false">完成</span>
                </p>
                <mt-picker :slots="slots" @change="onValuesChange" :itemHeight="46"></mt-picker>
            </div>
        </transition>
        <!-- 选择币种 -->
        <transition name="timeTop">
            <div class="time-picker" v-show="bShow">
                <p>
                    <span @click="bShow=false">取消</span>
                    <span @click="bShow=false">完成</span>
                </p>
                <mt-picker :slots="Bslots" @change="onValuesChangeB" :itemHeight="46"></mt-picker>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //选择时间区间
            timeShow: false,
            getTime: "",
            slots: [
                {
                    flex: 1,
                    values: [
                        "2015-01",
                        "2015-02",
                        "2015-03",
                        "2015-04",
                        "2015-05",
                        "2015-06"
                    ],
                    className: "slot1",
                    textAlign: "center"
                },
                {
                    divider: true,
                    content: "至",
                    className: "slot2"
                },
                {
                    flex: 1,
                    values: [
                        "2015-01",
                        "2015-02",
                        "2015-03",
                        "2015-04",
                        "2015-05",
                        "2015-06"
                    ],
                    className: "slot3",
                    textAlign: "center"
                }
            ],
            //选择类别区间
            bShow: false,
            getB: "",
            Bslots: [
                {
                    flex: 1,
                    values: [
                        "USDT1",
                        "USDT2",
                        "USDT3",
                        "USDT4",
                        "USDT5",
                        "USDT6"
                    ],
                    className: "slot1",
                    textAlign: "center"
                }
            ]
        };
    },
    props: ["colorWhite"],
    methods: {
        //获取时间区间
        onValuesChange(picker, values) {
            console.log(values, 88);
            this.getTime = values;
        },
        //获取币种
        onValuesChangeB(picker, values) {
            console.log(values, 99);
            this.getB = values;
        }
    }
};
</script>
<style lang="less" scoped>
.chooseColor1 {
    padding: 0 15px;
    color: @white;
    font-size: 13px;
    .flexBetweenCenter();
    height: 10vh;
    .choose-left {
        width: 60%;
        .flexBetweenCenter();
        > div {
            width: 45%;
            .flexBetweenCenter();
            border: 1px solid @white;
            border-radius: 5px;
            height: 28px;
            padding: 0 6px;
        }
        > span {
            margin: 10px;
        }
    }
    .choose-right {
        width: 30%;
        border: 1px solid @white;
        border-radius: 5px;
        height: 28px;
        .flexBetweenCenter();
        padding: 0 6px;
    }
}
.chooseColor2 {
    padding: 0 15px;
    color: @blackColor5;
    font-size: 13px;
    .flexBetweenCenter();
    height: 10vh;
    .choose-left {
        width: 60%;
        .flexBetweenCenter();
        > div {
            width: 45%;
            .flexBetweenCenter();
            border: 1px solid @blackColor5;
            border-radius: 5px;
            height: 28px;
            padding: 0 6px;
        }
        > span {
            margin: 10px;
        }
    }
    .choose-right {
        width: 30%;
        border: 1px solid @blackColor5;
        border-radius: 5px;
        height: 28px;
        .flexBetweenCenter();
        padding: 0 6px;
    }
}
// 时间 币种
.time-picker {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: absolute;
    border-top: 1px solid #eee;
    left: 0;
    bottom: 0;
    z-index: 2;
    background-color: @white;
    p {
        padding: 10px 20px;
        box-sizing: border-box;
        color: #478ee5;
        font-size: 14px;
        font-weight: bold;
        .flexBetweenCenter();
    }
}
</style>
